<template>
  <div>
    <el-button type="primary" @click="addMenu(null)">添加菜单</el-button>
    <h3>后台</h3>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="菜单名称" sortable width="300">
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" sortable width="180">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="菜单路径" width="300">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.parentId === 0"
            @click="addMenu(scope.row.id)"
          >添加
          </el-button
          >
          <el-button type="text" @click="editMenu(scope.row.id, '0')"
          >编辑
          </el-button
          >

          <el-button type="text" @click="delMenu(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <h3>门户</h3>
    <el-table
      :data="tableList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="菜单名称" sortable width="300">
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" sortable width="180">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="菜单路径" width="300">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.parentId === 0"
            @click="addMenu(scope.row.id)"
          >添加
          </el-button>

          <el-button type="text" @click="editMenu(scope.row.id, '1')"
          >编辑
          </el-button>

          <el-button type="text" @click="delMenu(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialog"
      width="40%"
      @close="closeDialog"
    >
      <el-form label-width="80px" ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单分区" v-if="dialogTitle === '添加菜单'">
          <el-select v-model="form.partition" placeholder="请选择菜单分区">
            <el-option label="后端" value="0"></el-option>
            <el-option label="门户" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路由地址" prop="path">
          <el-input v-model="form.path"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-input v-model="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="组件名称">
          <el-input v-model="form.componentName"></el-input>
        </el-form-item>
        <el-form-item label="组件路径">
          <el-input v-model="form.component"></el-input>
        </el-form-item>
        <el-form-item label="是否展示">
          <el-switch v-model="form.visible"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="dialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      tableList: [],
      dialog: false,
      form: {
        name: "",
        partition: "0",
        parentId: "",
        id: "",
        sort: "",
        path: "",
        icon: "",
        component: "",
        componentName: "",
        visible: false,
      },
      dialogTitle: "",
      rules: {
        name: [{required: true, message: "请输入菜单名称", trigger: "blur"}],
        sort: [{required: true, message: "请输入排序", trigger: "blur"}],
        path: [{required: true, message: "请输入路由地址", trigger: "blur"}],
      },
    };
  },
  mounted() {
    this.getMenus();
  },
  methods: {
    load(tree, treeNode, resolve) {
    },
    getMenus() {
      let axios1 = this.$createHttp.menuTree({partition: 0});
      let axios2 = this.$createHttp.menuTree({partition: 1});
      Promise.all([axios1, axios2]).then((res) => {
        this.tableData = res[0].data;
        this.tableList = res[1].data;
      });
    },
    editMenu(id, type) {
      this.dialogTitle = "编辑菜单"
      this.form.partition = type
      this.dialog = true;
      this.form.id = id;
      this.$createHttp.menuInfo(id).then((res) => {
        if (res.code === 200) {
          this.form = res.data;
        }
      });
    },
    delMenu(id) {
      this.$confirm('确认删除该菜单?').then(_ => {
        this.$createHttp.deleteMenu(id).then(res => {
          if (res.code === 200) {
            this.$message({
              message: "删除成功!",
              type: "success"
            })
            setTimeout(() => {
              this.getMenus()
            })
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            })
          }
        })
      })
    },
    addMenu(id = null) {
      this.dialogTitle = "添加菜单"
      this.dialog = true;
      if (id) {
        this.form.parentId = id;
      } else {
        this.form.parentId = 0
      }
    },
    closeDialog() {
      this.dialog = false;
      for (let i in this.form) {
        if (i == "visible") {
          this.form[i] = false;
        } else if (i == "partition") {
          this.form[i] = "0";
        } else {
          this.form[i] = "";
        }
      }
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.form.sort = Number(this.form.sort);
          if (this.form.id) {
            this.submitEdit()
          } else {
            this.submitAdd()
          }

        } else {
          return false;
        }
      });
    },
    submitAdd() {
      this.$createHttp.addMenu(this.form).then((res) => {
        if (res.code === 200) {
          this.closeDialog();
          this.$message({
            message: "菜单添加成功",
            type: "success",
          });
          setTimeout(() => {
            this.getMenus();
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    submitEdit() {
      this.$createHttp.updateMenu(this.form).then((res) => {
        if (res.code === 200) {
          this.closeDialog();
          this.$message({
            message: "菜单修改成功",
            type: "success",
          });
          setTimeout(() => {
            this.getMenus();
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    }
  },
};
</script>
